<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大型犬选购 - 爱宠之家</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="styles.css" rel="stylesheet">
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">爱宠之家</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="../index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../adoption/adoption.html">宠物领养</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../cats/cats.html">猫咪选购</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../small-dogs/small-dogs.html">小型犬选购</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../large-dogs/large-dogs.html">大型犬选购</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../food/food.html">宠物用品</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <div class="page-header">
        <div class="container">
            <h1>大型犬选购</h1>
            <p class="lead">忠诚可靠的大型犬伙伴，为您的生活增添守护</p>
        </div>
    </div>

    <!-- 筛选区域 -->
    <div class="container mt-4">
        <div class="filter-section">
            <div class="row g-3">
                <div class="col-md-3">
                    <select class="form-select" id="filterBreed">
                        <option value="">犬种选择</option>
                        <option value="金毛犬">金毛犬</option>
                        <option value="拉布拉多">拉布拉多</option>
                        <option value="阿拉斯加">阿拉斯加</option>
                        <option value="萨摩耶">萨摩耶</option>
                        <option value="哈士奇">哈士奇</option>
                        <option value="德牧">德牧</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="filterAge">
                        <option value="">年龄</option>
                        <option value="2-3个月">2-3个月</option>
                        <option value="4-6个月">4-6个月</option>
                        <option value="7-12个月">7-12个月</option>
                        <option value="1岁以上">1岁以上</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="filterGender">
                        <option value="">性别</option>
                        <option value="公">公狗</option>
                        <option value="母">母狗</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="filterPrice">
                        <option value="">价格区间</option>
                        <option value="0-3000">3000以下</option>
                        <option value="3000-6000">3000-6000</option>
                        <option value="6000-10000">6000-10000</option>
                        <option value="10000-999999">10000以上</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- 大型犬列表 -->
    <div class="container mt-4">
        <div class="row g-4" id="dogList">
            <!-- 大型犬卡片将通过JavaScript动态加载 -->
        </div>

        <!-- 添加大型犬按钮 -->
        <div class="text-center mt-4">
            <button type="button" class="btn btn-primary" onclick="showAddModal()">添加大型犬</button>
        </div>

        <!-- 分页 -->
        <nav class="mt-5">
            <ul class="pagination justify-content-center" id="pagination">
                <!-- 分页将通过JavaScript动态加载 -->
            </ul>
        </nav>
    </div>

    <!-- 购买模态框 -->
    <div class="modal fade" id="purchaseModal" tabindex="-1" aria-labelledby="purchaseModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="purchaseModalLabel">购买信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="purchaseForm">
                        <input type="hidden" id="dogId">
                        <div class="mb-3">
                            <label class="form-label">姓名</label>
                            <input type="text" class="form-control" id="buyerName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">联系电话</label>
                            <input type="tel" class="form-control" id="buyerPhone" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">收货地址</label>
                            <input type="text" class="form-control" id="buyerAddress" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">备注信息</label>
                            <textarea class="form-control" id="buyerNote" rows="3" placeholder="请填写您的特殊要求"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="addToCart()">加入购物车</button>
                    <button type="button" class="btn btn-success" onclick="purchase()">立即购买</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加大型犬模态框 -->
    <div class="modal fade" id="addDogModal" tabindex="-1" aria-labelledby="addDogModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addDogModalLabel">添加大型犬</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addDogForm">
                        <div class="mb-3">
                            <label for="breed" class="form-label">品种 *</label>
                            <select class="form-select" id="breed" name="breed" required>
                                <option value="">请选择品种</option>
                                <option value="金毛犬">金毛犬</option>
                                <option value="拉布拉多">拉布拉多</option>
                                <option value="阿拉斯加">阿拉斯加</option>
                                <option value="萨摩耶">萨摩耶</option>
                                <option value="哈士奇">哈士奇</option>
                                <option value="德牧">德牧</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="age" class="form-label">年龄</label>
                            <select class="form-select" id="age" required>
                                <option value="">请选择年龄</option>
                                <option value="2-3个月">2-3个月</option>
                                <option value="4-6个月">4-6个月</option>
                                <option value="7-12个月">7-12个月</option>
                                <option value="1岁以上">1岁以上</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="gender" class="form-label">性别</label>
                            <select class="form-select" id="gender" required>
                                <option value="">请选择性别</option>
                                <option value="公">公狗</option>
                                <option value="母">母狗</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="color" class="form-label">毛色</label>
                            <input type="text" class="form-control" id="color" required>
                        </div>
                        <div class="mb-3">
                            <label for="price" class="form-label">价格</label>
                            <input type="number" class="form-control" id="price" required>
                        </div>
                        <div class="mb-3">
                            <label for="image" class="form-label">图片URL</label>
                            <input type="text" class="form-control" id="image" required>
                        </div>
                        <div class="mb-3">
                            <label for="certificate" class="form-label">证书状态</label>
                            <select class="form-select" id="certificate" required>
                                <option value="有证书">有证书</option>
                                <option value="无证书">无证书</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">描述</label>
                            <textarea class="form-control" id="description" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="addDog()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑大型犬模态框 -->
    <div class="modal fade" id="editDogModal" tabindex="-1" aria-labelledby="editDogModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editDogModalLabel">编辑大型犬</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editDogForm">
                        <input type="hidden" id="editId">
                        <div class="mb-3">
                            <label for="editBreed" class="form-label">品种</label>
                            <select class="form-select" id="editBreed" required>
                                <option value="">请选择品种</option>
                                <option value="金毛犬">金毛犬</option>
                                <option value="拉布拉多">拉布拉多</option>
                                <option value="阿拉斯加">阿拉斯加</option>
                                <option value="萨摩耶">萨摩耶</option>
                                <option value="哈士奇">哈士奇</option>
                                <option value="德牧">德牧</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editAge" class="form-label">年龄</label>
                            <select class="form-select" id="editAge" required>
                                <option value="">请选择年龄</option>
                                <option value="2-3个月">2-3个月</option>
                                <option value="4-6个月">4-6个月</option>
                                <option value="7-12个月">7-12个月</option>
                                <option value="1岁以上">1岁以上</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editGender" class="form-label">性别</label>
                            <select class="form-select" id="editGender" required>
                                <option value="">请选择性别</option>
                                <option value="公">公狗</option>
                                <option value="母">母狗</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editColor" class="form-label">毛色</label>
                            <input type="text" class="form-control" id="editColor" required>
                        </div>
                        <div class="mb-3">
                            <label for="editPrice" class="form-label">价格</label>
                            <input type="number" class="form-control" id="editPrice" required>
                        </div>
                        <div class="mb-3">
                            <label for="editImage" class="form-label">图片URL</label>
                            <input type="text" class="form-control" id="editImage" required>
                        </div>
                        <div class="mb-3">
                            <label for="editCertificate" class="form-label">证书状态</label>
                            <select class="form-select" id="editCertificate" required>
                                <option value="有证书">有证书</option>
                                <option value="无证书">无证书</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editDescription" class="form-label">描述</label>
                            <textarea class="form-control" id="editDescription" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateDog()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 添加全局 AJAX 设置
        $.ajaxSetup({
            complete: function (xhr, status) {
                // 检查响应状态
                if (xhr.responseJSON && xhr.responseJSON.code === "401") {
                    alert("登录已过期，请重新登录！");
                    // 清除本地存储的 token
                    localStorage.removeItem("token");
                    // 跳转到登录页面
                    window.location.href = "/dev/views/login.html";
                }
            }
        });

        // 检查是否已登录
        function checkLogin() {
            const token = localStorage.getItem("token");
            if (!token) {
                alert("请先登录！");
                window.location.href = "/dev/views/login.html";
                return false;
            }
            return true;
        }

        let currentPage = 1;
        const pageSize = 8;
        let totalPages = 1;

        // 页面加载完成后获取大型犬列表
        $(document).ready(function () {
            if (checkLogin()) {
                loadDogs(1);
                setupFilters();
            }
        });

        // 设置筛选器事件
        function setupFilters() {
            $('#filterBreed, #filterAge, #filterGender, #filterPrice').change(function () {
                currentPage = 1;
                loadDogs(1);
            });
        }

        // 加载大型犬列表
        function loadDogs(page) {
            let filters = {
                breed: $('#filterBreed').val(),
                age: $('#filterAge').val(),
                gender: $('#filterGender').val(),
                priceRange: $('#filterPrice').val(),
                page: page,
                pageSize: pageSize
            };

            $.ajax({
                url: '/dev/large-dog/list',
                type: 'GET',
                headers: {
                    "token": localStorage.getItem("token")
                },
                data: filters,
                success: function (res) {
                    if (res.code === "200") {
                        renderDogs(res.data.list);
                        renderPagination(res.data.total);
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (xhr, status, error) {
                    alert('加载失败：' + error);
                }
            });
        }

        // 渲染大型犬列表
        function renderDogs(dogs) {
            let html = '';
            const defaultImage = '/dev/images/default-dog.jpg'; // 默认图片路径

            if (!dogs || dogs.length === 0) {
                $('#dogList').html('<div class="col-12 text-center"><h3>暂无大型犬数据</h3></div>');
                return;
            }

            dogs.forEach(dog => {
                const imageUrl = dog.image || defaultImage;
                html += `
                    <div class="col-md-3 col-6 mb-4">
                        <div class="card h-100">
                            <div class="position-relative">
                                <div class="position-absolute top-0 end-0 m-2">
                                    <span class="badge ${dog.certificate === '有证书' ? 'bg-success' : 'bg-secondary'}">
                                        ${dog.certificate}
                                    </span>
                                </div>
                                <div class="image-container" style="height: 200px; overflow: hidden;">
                                    <img src="${imageUrl}" 
                                         class="card-img-top" 
                                         alt="${dog.breed}"
                                         style="width: 100%; height: 100%; object-fit: cover;"
                                         onerror="this.onerror=null; this.src='${defaultImage}'; this.classList.add('error-image');"
                                         onload="this.classList.remove('loading')">
                                    <div class="image-loading-overlay">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title text-primary mb-2">${dog.breed}</h5>
                                <p class="card-text mb-2">
                                    <span class="badge bg-info me-2">${dog.age}</span>
                                    <span class="badge bg-info me-2">${dog.gender}</span>
                                    <span class="badge bg-info">${dog.color}</span>
                                </p>
                                <p class="card-text small text-muted mb-3">${dog.description || '暂无描述'}</p>
                                <div class="price mb-3">
                                    <span class="fs-5 fw-bold text-danger">¥${dog.price.toLocaleString('zh-CN')}</span>
                                </div>
                                <div class="btn-group mt-auto w-100">
                                    <button class="btn btn-primary flex-grow-1" onclick="showPurchaseModal(${dog.id})">
                                        <i class="bi bi-cart-plus"></i> 购买
                                    </button>
                                    <button class="btn btn-info text-white" onclick="showEditModal(${dog.id})">
                                        <i class="bi bi-pencil"></i> 编辑
                                    </button>
                                    <button class="btn btn-danger" onclick="deleteDog(${dog.id})">
                                        <i class="bi bi-trash"></i> 删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>`;
            });
            $('#dogList').html(html);
        }

        // 渲染分页
        function renderPagination(total) {
            totalPages = Math.ceil(total / pageSize);
            let html = `
                <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${currentPage - 1})">上一页</a>
                </li>`;

            for (let i = 1; i <= totalPages; i++) {
                html += `
                    <li class="page-item ${currentPage === i ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
                    </li>`;
            }

            html += `
                <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="changePage(${currentPage + 1})">下一页</a>
                </li>`;

            $('#pagination').html(html);
        }

        // 切换页面
        function changePage(page) {
            if (page < 1 || page > totalPages) return;
            currentPage = page;
            loadDogs(page);
        }

        // 显示购买模态框
        function showPurchaseModal(id) {
            if (!checkLogin()) return;

            $('#dogId').val(id);
            $('#purchaseForm')[0].reset();
            let purchaseModal = new bootstrap.Modal(document.getElementById('purchaseModal'));
            purchaseModal.show();
        }

        // 显示添加模态框
        function showAddModal() {
            if (!checkLogin()) return;

            $('#addDogForm')[0].reset();
            let addDogModal = new bootstrap.Modal(document.getElementById('addDogModal'));
            addDogModal.show();
        }

        // 显示编辑模态框
        function showEditModal(id) {
            if (!checkLogin()) return;

            $.ajax({
                url: `/dev/large-dog/${id}`,
                type: 'GET',
                headers: {
                    "token": localStorage.getItem("token")
                },
                success: function (res) {
                    if (res.code === "200") {
                        let dog = res.data;
                        $('#editId').val(dog.id);
                        $('#editBreed').val(dog.breed);
                        $('#editAge').val(dog.age);
                        $('#editGender').val(dog.gender);
                        $('#editColor').val(dog.color);
                        $('#editPrice').val(dog.price);
                        $('#editImage').val(dog.image);
                        $('#editCertificate').val(dog.certificate);
                        $('#editDescription').val(dog.description);

                        let editModal = new bootstrap.Modal(document.getElementById('editDogModal'));
                        editModal.show();
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (xhr, status, error) {
                    alert('获取大型犬信息失败：' + error);
                }
            });
        }

        // 关闭模态框的辅助函数
        function closeModal(modalId) {
            let modal = bootstrap.Modal.getInstance(document.getElementById(modalId));
            if (modal) {
                modal.hide();
            }
        }

        // 添加大型犬
        function addDog() {
            if (!checkLogin()) return;

            if (!validateForm()) {
                return;
            }

            let dog = {
                breed: $('#breed').val(),
                age: $('#age').val(),
                gender: $('#gender').val(),
                color: $('#color').val(),
                price: parseFloat($('#price').val()),
                image: $('#image').val(),
                certificate: $('#certificate').val(),
                description: $('#description').val()
            };

            $.ajax({
                url: '/dev/large-dog/add',
                type: 'POST',
                headers: {
                    "token": localStorage.getItem("token"),
                    "Content-Type": "application/json"
                },
                data: JSON.stringify(dog),
                success: function (res) {
                    if (res.code === "200") {
                        alert('添加成功！');
                        closeModal('addDogModal');
                        loadDogs(currentPage);
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (xhr, status, error) {
                    alert('添加失败：' + error);
                }
            });
        }

        // 表单验证
        function validateForm() {
            let breed = $('#breed').val();
            let age = $('#age').val();
            let gender = $('#gender').val();
            let color = $('#color').val();
            let price = $('#price').val();
            let image = $('#image').val();
            let certificate = $('#certificate').val();

            if (!breed) {
                alert('请选择品种！');
                return false;
            }
            if (!age) {
                alert('请选择年龄！');
                return false;
            }
            if (!gender) {
                alert('请选择性别！');
                return false;
            }
            if (!color) {
                alert('请输入毛色！');
                return false;
            }
            if (!price || price <= 0) {
                alert('请输入有效的价格！');
                return false;
            }
            if (!image) {
                alert('请输入图片URL！');
                return false;
            }
            if (!certificate) {
                alert('请选择证书状态！');
                return false;
            }
            return true;
        }

        // 更新大型犬信息
        function updateDog() {
            if (!checkLogin()) return;

            let dog = {
                id: $('#editId').val(),
                breed: $('#editBreed').val(),
                age: $('#editAge').val(),
                gender: $('#editGender').val(),
                color: $('#editColor').val(),
                price: parseFloat($('#editPrice').val()),
                image: $('#editImage').val(),
                certificate: $('#editCertificate').val(),
                description: $('#editDescription').val()
            };

            $.ajax({
                url: '/dev/large-dog/update',
                type: 'PUT',
                headers: {
                    "token": localStorage.getItem("token"),
                    "Content-Type": "application/json"
                },
                data: JSON.stringify(dog),
                success: function (res) {
                    if (res.code === "200") {
                        alert('更新成功！');
                        closeModal('editDogModal');
                        loadDogs(currentPage);
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (xhr, status, error) {
                    alert('更新失败：' + error);
                }
            });
        }

        // 删除大型犬
        function deleteDog(id) {
            if (!checkLogin()) return;

            if (confirm('确定要删除这只大型犬吗？')) {
                $.ajax({
                    url: `/dev/large-dog/delete/${id}`,
                    type: 'DELETE',
                    headers: {
                        "token": localStorage.getItem("token")
                    },
                    success: function (res) {
                        if (res.code === "200") {
                            alert('删除成功！');
                            loadDogs(currentPage);
                        } else {
                            alert(res.msg);
                        }
                    }
                });
            }
        }

        // 加入购物车
        function addToCart() {
            if (!checkLogin()) return;

            let dogId = $('#dogId').val();
            if (!dogId) {
                alert('未选择大型犬！');
                return;
            }

            $.ajax({
                url: '/dev/cart/add',
                type: 'POST',
                headers: {
                    "token": localStorage.getItem("token"),
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({
                    dogId: parseInt(dogId),
                    quantity: 1
                }),
                success: function (res) {
                    if (res.code === "200") {
                        alert('已添加到购物车！');
                        const modal = bootstrap.Modal.getInstance(document.getElementById('purchaseModal'));
                        modal.hide();
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (xhr, status, error) {
                    alert('添加失败：' + error);
                }
            });
        }

        // 立即购买
        function purchase() {
            if (!checkLogin()) return;

            let dogId = $('#dogId').val();
            if (!dogId) {
                alert('未选择大型犬！');
                return;
            }

            let purchaseData = {
                dogId: parseInt(dogId),
                buyerName: $('#buyerName').val(),
                buyerPhone: $('#buyerPhone').val(),
                buyerAddress: $('#buyerAddress').val(),
                buyerNote: $('#buyerNote').val()
            };

            if (!purchaseData.buyerName || !purchaseData.buyerPhone || !purchaseData.buyerAddress) {
                alert('请填写完整的购买信息！');
                return;
            }

            $.ajax({
                url: '/dev/order/create',
                type: 'POST',
                headers: {
                    "token": localStorage.getItem("token"),
                    "Content-Type": "application/json"
                },
                data: JSON.stringify(purchaseData),
                success: function (res) {
                    if (res.code === "200") {
                        alert('购买成功！');
                        const modal = bootstrap.Modal.getInstance(document.getElementById('purchaseModal'));
                        modal.hide();
                        loadDogs(currentPage);
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (xhr, status, error) {
                    alert('购买失败：' + error);
                }
            });
        }

        // 添加样式到head部分
        const style = document.createElement('style');
        style.textContent = `
            .card {
                transition: transform 0.2s, box-shadow 0.2s;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                border: none;
                overflow: hidden;
            }
            .card:hover {
                transform: translateY(-5px);
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            }
            .image-container {
                position: relative;
                background-color: #f8f9fa;
            }
            .image-loading-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgba(255,255,255,0.8);
                transition: opacity 0.3s;
            }
            .card-img-top:not(.loading) + .image-loading-overlay {
                opacity: 0;
                pointer-events: none;
            }
            .card-img-top.error-image {
                opacity: 0.5;
            }
            .price {
                color: #dc3545;
                font-weight: bold;
            }
            .btn-group {
                gap: 0.25rem;
            }
            .badge {
                z-index: 2;
            }
            .card-title {
                font-size: 1.1rem;
                margin-bottom: 0.5rem;
            }
            .btn {
                padding: 0.375rem 0.75rem;
                font-size: 0.9rem;
            }
            .btn-group .btn {
                border-radius: 4px;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>

</html>